<template>
    <main>
        <div class="top-selector-box">
            <ul class="top-selector-ul clearfix">
                <li class="top-selector-item active">正在热映</li>
                <li class="top-selector-item">即将上映</li>
                <li class="top-selector-item">经典影片</li>
            </ul>
        </div>
        <main-selector class="main-selector" :selects-data="selectsData"></main-selector>
        <div class="mid">
            <div class="sort-box clearfix">
                <a v-for="c in sortList" :key="c.no" @click="selectSort(c)" >
                    <check-box class="check-box"    :select="c.select" >{{c.name}}</check-box>
                </a>
            </div>
            <div class="movies-box">
                <ul class="movies-ul clearfix">
                    <a href="#">

                        <li v-for="m in movieList" class="movie-box">
                            <div class="img-box">
                                <img :src="m.img" alt="">
                                <span v-if="m.isBuy" class="buy">购票</span>
                                <span v-if="m.dType == '2dm' " class="dType dType-2dm"></span>
                                <span v-else-if="m.dType == '3dm' " class="dType dType-3dm"></span>
                                <span v-else-if="m.dType == '3d' " class="dType dType-3d"></span>
                            </div>
                            <span class="movie-title">{{m.name}}</span>
                            <span class="movie-grade">{{m.grade}}</span>
                        </li>
                    </a>
                </ul>
            </div>
            <div class="paging-box">
                <my-paging class="my-paging"></my-paging>
            </div>
        </div>

    </main>
</template>

<script>
    import mainSelector from '../components/main-selector'
    import checkBox from '../components/check-box'
    import myPaging from '../components/my-paging'
    export default {
        name: "movie",
        data:function () {
            return {
                sortList:[{no:1,name:'按热门排序',select:true},{no:2,name:'按时间排序',select:false},{no:3,name:'按评价排序',select:false}],
                movieList:[
                    {
                        name:'芳华',
                        img:'static/movies/1.png',
                        grade:9.6,
                        isBuy:true,
                        dType:'2dm',
                    },
                    {
                        name:'芳华',
                        img:'static/movies/1.png',
                        grade:9.6,
                        isBuy:true,
                        dType:'2d',
                    },
                    {
                        name:'芳华',
                        img:'static/movies/1.png',
                        grade:9.6,
                        isBuy:true,
                        dType:'2d',
                    },
                    {
                        name:'芳华',
                        img:'static/movies/1.png',
                        grade:9.6,
                        isBuy:true,
                        dType:'2d',
                    },
                    {
                        name:'芳华',
                        img:'static/movies/1.png',
                        grade:9.6,
                        isBuy:true,
                        dType:'2d',
                    },
                    {
                        name:'芳华',
                        img:'static/movies/1.png',
                        grade:9.6,
                        isBuy:false,
                        dType:'2d',
                    },{
                        name:'芳华',
                        img:'static/movies/1.png',
                        grade:9.6,
                        isBuy:true,
                        dType:'2d',
                    },
                    {
                        name:'芳华',
                        img:'static/movies/1.png',
                        grade:9.6,
                        isBuy:true,
                        dType:'2d',
                    },
                    {
                        name:'芳华',
                        img:'static/movies/1.png',
                        grade:9.6,
                        isBuy:true,
                        dType:'2dm',
                    },
                    {
                        name:'芳华',
                        img:'static/movies/1.png',
                        grade:9.6,
                        isBuy:false,
                        dType:'2dm',
                    },
                    {
                        name:'芳华',
                        img:'static/movies/1.png',
                        grade:9.6,
                        isBuy:true,
                        dType:'2d',
                    },
                    {
                        name:'芳华',
                        img:'static/movies/1.png',
                        grade:9.6,
                        isBuy:true,
                        dType:'3d',
                    },
                    {
                        name:'芳华',
                        img:'static/movies/1.png',
                        grade:9.6,
                        isBuy:true,
                        dType:'2d',
                    },
                    {
                        name:'芳华',
                        img:'static/movies/1.png',
                        grade:9.6,
                        isBuy:true,
                        dType:'2d',
                    },
                    {
                        name:'芳华',
                        img:'static/movies/1.png',
                        grade:9.6,
                        isBuy:true,
                        dType:'2d',
                    },
                    {
                        name:'芳华',
                        img:'static/movies/1.png',
                        grade:9.6,
                        isBuy:true,
                        dType:'3d',
                    },
                    {
                        name:'芳华',
                        img:'static/movies/1.png',
                        grade:9.6,
                        isBuy:true,
                        dType:'2d',
                    },
                    {
                        name:'芳华',
                        img:'static/movies/1.png',
                        grade:9.6,
                        isBuy:true,
                        dType:'2d',
                    },

                ],
                selectsData:[
                    {
                        name:'类型',
                        selects:[
                            {name:'全部',isActive:true},
                            {name:'爱情',isActive:false},
                            {name:'喜剧',isActive:false},
                            {name:'动画',isActive:false},
                            {name:'剧情',isActive:false},
                            {name:'恐怖',isActive:false},
                            {name:'惊悚',isActive:false},
                            {name:'科幻',isActive:false},
                            {name:'动作',isActive:false},
                            {name:'悬疑',isActive:false},
                            {name:'犯罪',isActive:false},
                            {name:'冒险',isActive:false},
                            {name:'战争',isActive:false},
                            {name:'奇幻',isActive:false},
                            {name:'运动',isActive:false},
                            {name:'家庭',isActive:false},
                            {name:'古装',isActive:false},
                            {name:'武侠',isActive:false},
                            {name:'西部',isActive:false},
                            {name:'历史',isActive:false},
                            {name:'传记',isActive:false},
                            {name:'情色',isActive:false},
                            {name:'歌舞',isActive:false},
                            {name:'黑色电影',isActive:false},
                            {name:'短片',isActive:false},
                            {name:'纪录片',isActive:false},
                            {name:'其他',isActive:false},
                        ]
                    },
                    {
                        name:'区域',
                        selects:[
                            {name:'全部',isActive:true},
                            {name:'大陆',isActive:false},
                            {name:'美国',isActive:false},
                            {name:'韩国',isActive:false},
                            {name:'日本',isActive:false},
                            {name:'中国香港',isActive:false},
                            {name:'中国台湾',isActive:false},
                            {name:'泰国',isActive:false},
                            {name:'印度',isActive:false},
                            {name:'法国',isActive:false},
                            {name:'英国',isActive:false},
                            {name:'俄罗斯',isActive:false},
                            {name:'意大利',isActive:false},
                            {name:'西班牙',isActive:false},
                            {name:'德国',isActive:false},
                            {name:'波兰',isActive:false},
                            {name:'澳大利亚',isActive:false},
                            {name:'伊朗',isActive:false},
                            {name:'其他',isActive:false},
                        ]
                    },
                    {
                        name:'年代',
                        selects:[
                            {name:'全部',isActive:true},
                            {name:'2017以后',isActive:false},
                            {name:'2017',isActive:false},
                            {name:'2016',isActive:false},
                            {name:'2015',isActive:false},
                            {name:'2014',isActive:false},
                            {name:'2013',isActive:false},
                            {name:'2012',isActive:false},
                            {name:'2011',isActive:false},
                            {name:'2000-2010',isActive:false},
                            {name:'90年代',isActive:false},
                            {name:'80年代',isActive:false},
                            {name:'70年代',isActive:false},
                            {name:'更早',isActive:false},
                        ]
                    },
                ]

            }
        },
        methods:{
            selectSort:function (cb) {
                console.log(cb)
                this.sortList.forEach(function (c) {
                    c.select = false
                })
                cb.select = true
            }
        },
        components:{
            'main-selector':mainSelector,
            'check-box':checkBox,
            'my-paging':myPaging,
        }
    }
</script>

<style scoped>

    main .top-selector-box{
        height: 60px;
        background-color: #4A4647;
        min-width: 1200px;
    }
    main .top-selector-box>.top-selector-ul{
        width: fit-content;
        margin: 0 auto;

    }
    main .top-selector-box>.top-selector-ul>li{
        float: left;
        height: 60px;
        margin-left: 60px;
        line-height: 60px;
        text-align: center;
        color: #85998E;
        font-size: 16px;
        transition: color 500ms 0ms;
    }
    main .top-selector-box>.top-selector-ul>li:hover:not(.active){
        color: white;
    }
    main .top-selector-box>.top-selector-ul>li.active{
        position: relative;
        color: #e5342a;
    }
    main .top-selector-box>.top-selector-ul>li.active:before{
        content: "";
        width: 2px;
        height: 0;
        display: inline-block;
        position: absolute;
        left: 50%;
        margin-left: -10px;
        bottom: 0px;
        border-bottom: 7px solid #ffffff;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-top: none;
    }
    .main-selector {
        width: 1120px;
        margin: 0 auto;
        margin-top: 40px;
    }
    .mid{
        width: 1120px;
        margin: 0 auto;
        margin-top: 40px;
        padding-bottom: 50px;
    }

    .sort-box .check-box{
        float: left;
        margin-right: 30px;
        font-size: 14px;
    }
    .movies-box{
        margin: 0 auto;
        margin-top: 20px;
    }
    .movie-box{
        position: relative;
        float: left;
        box-sizing: border-box;
        width: 182px;
        margin-left: 2px;
        margin-right: 2px;
        height: 300px;

    }
    .movie-box span{
        display: block;
        text-align: center;
    }
    .movie-box span:nth-of-type(1){
        font-size: 16px;
        margin-top: 10px;
    }
    .movie-box span:nth-of-type(2){
        width: 40px;
        position: absolute;
        bottom: 10px;
        margin-left: -20px;
        left: 50%;
        color: #ffb452;

        font-size: 20px;
    }
    .movie-box .img-box{
        width: 160px;
        height: 220px;
        margin-left: auto;
        margin-right: auto;
        position: relative;

    }
    .movie-box .img-box img{
        width: 100%;
        height: 100%;
    }
    .movie-box .img-box span.buy{
        position: absolute;
        right: 5px;
        bottom: 5px;
        padding: 3px 6px;
        text-align: center;
        border-radius: 10px;
        background-color: orange;
        color: white;
    }
    .movie-box .img-box span.dType{
        position: absolute;
        top: 5px;
        left: 15px;
        background-color: #000000;
        width: 90px;
        height: 90px;
    }
    .movie-box .img-box span.dType.dType-2dm{
        background: url("../assets/2dm.png") no-repeat;
    }
    .movie-box .img-box span.dType.dType-3dm{
        background: url("../assets/3dm.png") no-repeat;
    }
    .movie-box .img-box span.dType.dType-3d{
        background: url("../assets/3d.png") no-repeat;
    }
    .paging-box{
        margin-top: 20px;
    }
    .my-paging{
        margin:  0 auto;
    }

</style>
